<template>
  <div class="app-container">
    <div class="search">
      <el-form
        ref="queryForm"
        class="queryForm"
        :inline="true"
        :model="formInline"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="指标编号"
              class="formItem"
            >
              <el-input
                v-model="formInline.indicatorNumber"
                placeholder="请输入指标编号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="指标名称"
              class="formItem"
            >
              <el-input
                v-model="formInline.indicatorName"
                placeholder="请输入指标名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="指标类型"
              class="formItem"
            >
              <el-select
                v-model="formInline.indicatorType"
                placeholder="请选择指标类型"
                clearable
                class="w100"
              >
                <el-option
                  v-for="(statement_type, index) in statement_types"
                  :label="statement_type.label"
                  :value="statement_type.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="正/负向指标"
              class="formItem"
            >
              <el-select
                v-model="formInline.positiveOrNegative"
                placeholder="请选择正/负向指标"
                clearable
                class="w100"
              >
                <el-option
                  v-for="(dict, index) in positiveOrNegative_types"
                  :label="dict.label"
                  :value="dict.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
              >搜索</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="handleReset"
              >清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="list">
        <el-button
          type="primary"
          class="add"
          size="small"
          icon="el-icon-plus"
          @click="editMailbox"
        >新增</el-button>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eff7fd'}"
          ref="table"
          highlight-current-row
          v-loading="loading"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="指标编号"
            prop="indicatorNumber"
            align="center"
          ></el-table-column>
          <el-table-column
            label="指标名称"
            prop="indicatorName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="指标类型"
            prop="indicatorType"
            align="center"
            :formatter="typeFormatter"
          ></el-table-column>
          <el-table-column
            label="正/负向指标"
            prop="positiveOrNegative"
            align="center"
            :formatter="typeFormatterSign"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop="handleUpdate(scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                @click.stop="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="showFlag"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <el-form
        ref="editForm"
        :rules="rule"
        :model="editForm"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="指标编号"
              prop="indicatorNumber"
            >
              <el-input
                v-model="editForm.indicatorNumber"
                placeholder="请输入指标编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="指标名称"
              prop="indicatorName"
            >
              <el-input
                v-model="editForm.indicatorName"
                placeholder="请输入指标名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="indicatorType"
              label="指标类型"
            >
              <el-select
                style="width: 100%;"
                v-model="editForm.indicatorType"
                placeholder="请选择指标类型"
              >
                <el-option
                  v-for="(dict, index) in statement_types"
                  :label="dict.label"
                  :value="dict.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="positiveOrNegative"
              label="正/负向指标"
            >
              <el-select
                style="width: 100%;"
                v-model="editForm.positiveOrNegative"
                placeholder="请选择正/负向指标"
              >
                <el-option
                  v-for="(dict, index) in positiveOrNegative_types"
                  :label="dict.label"
                  :value="dict.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="characteristic"
              label="指标性质"
            >
              <el-select
                style="width: 100%;"
                v-model="editForm.characteristic"
                placeholder="请选择指标性质"
              >
                <el-option
                  v-for="(dict, index) in characteristic_types"
                  :label="dict.label"
                  :value="dict.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="指标取值"
              prop="indicatorValue"
            >
              <el-input
                v-model="editForm.indicatorValue"
                placeholder="请输入指标取值SQL"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="指标描述"
              prop="indicatorDescribe"
            >
              <el-input
                v-model="editForm.indicatorDescribe"
                type="textarea"
                placeholder="请输入指标描述"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleSubmit"
        >保存</el-button>
        <el-button
          type="primary"
          @click="handleReset"
        >重置</el-button>
        <el-button
          type="primary"
          @click="showFlag = false"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getScoringManagement,
  addScoringManagement,
  updateScoringManagement,
  deleteScoringManagement,
} from '@/api/gradManage.js'
import { getField } from '@/api/user.js'
import { Encrypt } from '@/api/cryptoAES.js'
export default {
  data() {
    return {
      // 搜索表单
      formInline: {
        indicatorNumber: '', // 指标编号
        indicatorName: '', // 指标名称
        indicatorType: '', //指标类型
        positiveOrNegative: '', //正/负向指标
      },
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 指标类型
      statement_types: [],
      positiveOrNegative_types: [
        { label: '正向指标', value: 0 },
        { label: '负向指标', value: 1 },
      ],
      // 指标性质
      characteristic_types: [
        { label: '区间', value: '0' },
        { label: '判断', value: '1' },
        { label: '等级', value: '2' },
      ],
      //弹框
      title: '',
      showFlag: false,
      editForm: {},
      rule: {
        indicatorNumber: [
          { required: true, message: '请输入指标编号', trigger: 'blur' },
        ],
        indicatorName: [
          { required: true, message: '请选择指标名称', trigger: 'change' },
        ],
        indicatorType: [
          { required: true, message: '请选择指标类型', trigger: 'change' },
        ],
        positiveOrNegative: [
          { required: true, message: '请选择正/负向指标', trigger: 'change' },
        ],
        characteristic: [
          { required: true, message: '请选择指标性质', trigger: 'change' },
        ],
        indicatorValue: [
          { required: true, message: '请输入指标取值SQL', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    let params = {
      page: 1,
      size: 100,
      code: 'indicator_type',
    }
    getField(params).then((res) => {
      if (res.status) {
        this.statement_types = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })
    this.handleSearch()
  },
  methods: {
    //搜索
    handleSearch() {
      let formLine = this.formInline
      let params = {
        ...formLine,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      getScoringManagement(params).then((res) => {
        this.tableData = res.data.records
        this.total = Number(res.data.total)
      })
    },
    sizeChange(val) {
      this.pageSize = val
      this.handleSearch()
    },
    pageChange(val) {
      this.pageNum = val
      this.handleSearch()
    },
    //新增
    editMailbox() {
      this.showFlag = true
      this.title = '新增指标'
      this.editForm = {}
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    //编辑
    handleUpdate(row) {
      this.showFlag = true
      this.title = '修改指标'
      this.editForm = { ...row }
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    //保存
    handleSubmit() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          let form = this.editForm
          let params = {
            indicatorDescribe: form.indicatorDescribe,
            indicatorName: form.indicatorName,
            indicatorNumber: form.indicatorNumber,
            indicatorType: form.indicatorType,
            indicatorValue: Encrypt(form.indicatorValue),
            positiveOrNegative: form.positiveOrNegative,
            characteristic: form.characteristic,
          }
          if (this.title == '新增指标') {
            addScoringManagement(params).then((res) => {
              if (res.status) {
                this.showFlag = false
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                })
                this.handleSearch()
              }
            })
          } else if (this.title == '修改指标') {
            ;(params.id = form.id),
              updateScoringManagement(params).then((res) => {
                if (res.status) {
                  this.showFlag = false
                  this.$message({
                    type: 'success',
                    message: '操作成功!',
                  })
                  this.handleSearch()
                }
              })
          }
        }
      })
    },
    //重置
    handleReset() {
      this.formInline = {}
      this.handleSearch()
    },
    //删除
    handleDelete(row) {
      this.$confirm('确定删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteScoringManagement({ id: row.id }).then((res) => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.handleSearch()
          }
        })
      })
    },
    typeFormatter(r, c, v, i) {
      let list = this.statement_types.filter((item) => item.value == v)
      return list.length > 0 ? list[0].label : v
    },
    typeFormatterSign(r, c, v, i) {
      let list = this.positiveOrNegative_types.filter((item) => item.value == v)
      return list.length > 0 ? list[0].label : v
    },
    //DES加密
    encryptByDES(message, key) {
      var keyHex = CryptoJS.enc.Utf8.parse(key)
      var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      })
      return encrypted.ciphertext.toString()
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  padding: 20px 0 20px 20px;
  background:#fff;
}
.list {
  .add {
    margin-bottom: 10px;
  }
}
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: calc(100% - 125px);
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.dialog-footer {
  text-align: center;
}
</style>